<template>
  <div>
     <!-- 产品信息--> 
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="产品类型：" required>
          <div
            v-for="(item, index) in virtual"
            :key="index"
            class="virtual"
            :class="
              baseInfoForm.tour_type == item.id
                ? 'virtual_boder'
                : 'virtual_boder2'
            "
            @click="virtualbtn(item.id)"
          >
            <div class="virtual_top">{{ item.tit }}</div>
            <div class="virtual_bottom">({{ item.tit2 }})</div>
            <div v-if="baseInfoForm.tour_type == item.id" class="virtual_san" />
            <div v-if="baseInfoForm.tour_type == item.id" class="virtual_dui">
              ✓
            </div>
          </div>
          <div class="desc">注：选择产品类型后将不可修改。</div>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="24" v-if="baseInfoForm.source == 1">
        <el-form-item label="同程线路Id：">
          <el-input
            v-model="baseInfoForm.tc_line_id"
            :disabled="true"
            size="small"
            class="duanWidth"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="!$route.params.id" class="display-flex display-flex-align-center">
        <el-form-item label="同程线路Id：">
          <el-input
            v-model="baseInfoForm.tc_line_id"
            placeholder="请输入同程线路id"
            size="small"
            class="duanWidth mr-10"  
          />
          <el-button type="primary" size="small" @click="addTcProduct">确认</el-button>
        </el-form-item>
        
      </el-col> -->
      <!-- 产品消息--> 
      <el-col :span="24">
        <el-form-item label="主标题：" prop="store_name">
          <el-input
            v-model="baseInfoForm.store_name"
            placeholder="请输入产品主标题"
            size="small"
            class="pageWidth"
          />
        </el-form-item>
        
      </el-col>

      <el-col :span="24">
        <el-form-item label="副标题：" >
          <el-input
            v-model="baseInfoForm.store_info"
            type="textarea"
            maxlength="500"
            minilength="0"
            show-word-limit	
            placeholder="请输入产品副标题"
            class="pageWidth"
            size="small"
          />
        </el-form-item>  
      </el-col>
      
      <el-col :span="24">
        <el-form-item label="产品封面图：" prop="image">
          <div
            class="upLoadPicBox"
            title="750*750px"
            @click="modalPicTap('1')"
          >
            <div v-if="baseInfoForm.image" class="pictrue">
              <img :src="baseInfoForm.image">
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="产品轮播图：" prop="slider_image">
          <div class="acea-row">
            <div
              v-for="(item, index) in baseInfoForm.slider_image"
              :key="index"
              class="pictrue"
              draggable="false"
              @dragstart="handleDragStart($event, item)"
              @dragover.prevent="handleDragOver($event, item)"
              @dragenter="handleDragEnter($event, item)"
              @dragend="handleDragEnd($event, item)"
            >
              <img :src="item">
              <i
                class="el-icon-error btndel"
                @click="handleRemove(index)"
              />
            </div>
            <div
              v-if="baseInfoForm.slider_image.length < 10"
              class="uploadCont"
              title="750*750px"
            >
              <div class="upLoadPicBox" @click="modalPicTap('2')">
                <div class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="主图视频：" prop="video_link">
          <el-input
            v-model="videoLink"
            size="small"
            class="perW50"
            placeholder="请输入MP4格式的视频链接"
          />
          <input
            ref="refid"
            type="file"
            style="display: none;"
            @change="zh_uploadFile_change"
          >
          <el-button
            type="primary"
            icon="ios-cloud-upload-outline"
            class="uploadVideo"
            size="small"
            @click="zh_uploadFile"
          >
            {{ videoLink ? "确认添加" : "上传视频" }}
          </el-button>
          <el-col :span="12">
            <el-progress
              v-if="upload.videoIng"
              :percentage="progress"
              :text-inside="true"
              :stroke-width="20"
              style="margin-top: 10px;"
            />
          </el-col>
          <el-col :span="24">
            <div v-if="baseInfoForm.video_link" class="iview-video-style">
              <video
                style="width:100%;height: 100%!important;border-radius: 10px;"
                :src="baseInfoForm.video_link"
                controls="controls"
              >
                您的浏览器不支持 video 标签。
              </video>
              <div class="mark" />
              <i class="el-icon-delete iconv" @click="delVideo" />
            </div>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="平台产品分类：" prop="cate_id">
          <el-cascader
            v-model="baseInfoForm.cate_id"
            class="pageWidth"
            size="small"
            :options="categoryList"
            :props="props"
            filterable
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="商户产品分类：">
          <el-cascader
            v-model="baseInfoForm.mer_cate_id"
            class="pageWidth"
            size="small"
            :options="merCateList"
            :props="{multiple:true,checkStrictly:true,emitPath:false }"
            filterable
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col v-if="labelList.length" :span="24">
        <el-form-item label="产品标签：">
          <el-select
            v-model="baseInfoForm.mer_labels"
            size="small"
            multiple
            placeholder="请选择"
            class="pageWidth"
          >
            <el-option
              v-for="item in labelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="baseInfoForm.tour_type!=1">
        <el-form-item label="行程天数：" prop="day_time">
          <el-input
            v-model="baseInfoForm.day_time"
            placeholder="请输入几天"
            size="small"
            class="duanWidth"
            type="number"
          />
          <span> 天</span>
          <el-input
            v-model="baseInfoForm.night"
            placeholder="请输入几晚"
            size="small"
            class="duanWidth"
            type="number"
          />
          <span> 晚</span>
        </el-form-item>
      </el-col>
      <el-col :span="6"  v-if="baseInfoForm.tour_type!=1">
        <el-form-item label="出发城市：" prop="start_city">
          <el-autocomplete
          v-model="baseInfoForm.start_city"
          prefix-icon="el-icon-search"
          :fetch-suggestions="querySearch"
          placeholder="请输入城市"
          class="duanWidth"
          @select="handleSelectStart"
        >
          <template slot-scope="{ item }">
            <div class="name" >
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        </el-form-item>
      </el-col>
      <el-col :span="18"  v-if="baseInfoForm.tour_type!=1">
        <el-form-item label="目的城市：" prop="end_city">
          <el-autocomplete
          v-model="baseInfoForm.end_city"
          prefix-icon="el-icon-search"
          label="name"
          :fetch-suggestions="querySearch" 
          placeholder="请输入城市"
          class="duanWidth"
          @select="handleSelectEnd"
        >
          <template slot-scope="{ item }">
            <div class="name" >
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        </el-form-item>
      </el-col>
      <el-col :span="6"  v-if="baseInfoForm.tour_type!=1">
        <el-form-item label="出发站点：" prop="start_stop_name">
          <el-autocomplete
          v-model="baseInfoForm.start_stop_name"
          prefix-icon="el-icon-search"
          :fetch-suggestions="querySearchStartStop"
          placeholder="请输入出发站点："
          class="duanWidth"
          @select="handleSelectStartStop"
        >
          <template slot-scope="{ item }">
            <div class="name" >
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        </el-form-item>
      </el-col>
      <el-col :span="18"  v-if="baseInfoForm.tour_type!=1">
        <el-form-item label="到达站点：" prop="end_stop_name">
          <el-autocomplete
          v-model="baseInfoForm.end_stop_name"
          prefix-icon="el-icon-search"
          label="name"
          :fetch-suggestions="querySearchEndStop" 
          placeholder="请输入到达站点："
          class="duanWidth"
          @select="handleSelectEndStop"
        >
          <template slot-scope="{ item }">
            <div class="name" >
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        </el-form-item>
      </el-col>

      <el-col :span="24" >
        <el-form-item label="截止购买时间：">
          <div class=" display-flex display-flex-align-center">
            <el-switch
            v-model="baseInfoForm.limit_deadline"
            :active-value="1"
            :inactive-value="0"
            :width="55"
            active-text="开启"
            inactive-text="关闭"
          />
          <div v-if="baseInfoForm.limit_deadline" class="ml-10 display-flex display-flex-align-center">
            <span class="mr-10">最晚需在使用前</span>
            <el-input class="mr-10" v-model="baseInfoForm.deadline_day" placeholder="请输入" type="number" style="width: 80px;"></el-input>
            <span class="mr-10">天</span>
            <el-time-picker
              v-model="baseInfoForm.deadline_hour"
              placeholder="请选择"
              size:="mini"
              format="HH:mm"
              value-format="HH:mm"
              style="width: 100px;"
              class="mr-10"
              >
            </el-time-picker>
            <span>购买</span>
          </div>
          </div>
        </el-form-item> 
      </el-col>
      <el-col :span="6" v-if="baseInfoForm.tour_type==2">
        <el-form-item label="提前检票时间：">
          <el-input type="number" placeholder="请输入提前检票时间" v-model="baseInfoForm.check_time">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item> 
      </el-col>
      <!-- <el-col :span="18">
        <el-form-item label="预计花费时间：" >
          <el-input type="number" placeholder="请输入预计花费时间" v-model="baseInfoForm.duration" style="width: 300px;">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item> 
      </el-col> -->
      <el-col :span="10">
        <el-form-item label="价格（仅前端展示，以日期价格为准）：" label-width="200">
          <el-input type="number" placeholder="请输入" v-model="baseInfoForm.price" style="width:150px">
            <template slot="append">元</template>
          </el-input>
        </el-form-item> 
      </el-col>
      <el-col :span="12">
        <el-form-item label="库存（仅前端展示，以日期库存为准）：" label-width="200" >
          <el-input type="number" placeholder="请输入" v-model="baseInfoForm.stock" style="width: 300px;">
          </el-input>
        </el-form-item> 
      </el-col>
      <el-col  :span="6">
        <el-col>
          <el-form-item label="最少购买件数：">
            <el-input-number
              v-model="baseInfoForm.once_min_count"
              :min="0"
              size="small"
              controls-position="right"
              placeholder="请输入购买件数"
              style="width:180px"
            />
          </el-form-item>
        </el-col>
      </el-col>

      <el-col  :span="18">
        <el-col>
          <el-form-item label="限购数量：" prop="once_max_count">
            <el-input-number
              v-model="baseInfoForm.once_max_count"
              :min="baseInfoForm.once_min_count"
              size="small"
              controls-position="right"
              placeholder="请输入购买件数"
              style="width:180px"
            />
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-form-item label="支持退款：">
          <el-switch
            v-model="baseInfoForm.refund_switch"
            :active-value="1"
            :inactive-value="0"
            :width="55"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item> 
      </el-col>
      <el-col :span="18">
        <el-form-item label="需确认订单：">
          <el-switch
            v-model="baseInfoForm.is_confirm_order"
            :active-value="1"
            :inactive-value="0"
            :width="55"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item> 
      </el-col>

      <el-col :span="24"  v-if="baseInfoForm.tour_type==1">
        <el-form-item label="核销类型：" prop="check_type">
          <el-radio v-model="baseInfoForm.check_type" :label="1">二维码核销</el-radio>
          <el-radio v-model="baseInfoForm.check_type" :label="2">身份证直接验证入园/使用</el-radio>
          <el-radio v-model="baseInfoForm.check_type" :label="3">需指定地点取票</el-radio>
          <el-radio v-model="baseInfoForm.check_type" :label="4">邮寄纸质票</el-radio>
        </el-form-item>         
      </el-col>
      <el-col :span="24"  v-if="baseInfoForm.tour_type==1">
        <el-form-item label="入园或者使用地址：" prop="use_address" label-width="200" >
          <el-input
            v-model="baseInfoForm.use_address"
            placeholder="请输入地址"
            size="small"
            class="pageWidth"
          />
        </el-form-item>         
      </el-col>

      <el-col v-if="guaranteeList.length" :span="24">
        <el-form-item label="服务保障：">
          <el-select
            v-model="baseInfoForm.guarantee_ids"
            size="small"
            multiple
            placeholder="请选择"
            class="pageWidth"
          >
            <el-option
              v-for="item in guaranteeList"
              :key="item.guarantee_id"
              :label="item.guarantee_name"
              :value="item.guarantee_id"
            />
          </el-select>
        </el-form-item>
      </el-col>

      
    </el-row>
  </div>
</template>
<script>

export default {
  name: 'productBaseSet',
  props: {
    baseInfo: {
      type: Object,
      default: () => ({}),
    },
    successData: {
      type: Boolean,
      default: false,
    },
    currentTab: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
       // 1，门票,2直通车，3跟团游4私家团5自由行，6，一日游
       virtual: [
        { tit: '直通车', id: 2, tit2: '景区直达' },
        { tit: '一日游', id: 6, tit2: '一日行程' },
        { tit: '跟团游', id: 3, tit2: '省时省心' },
        { tit: '私家团', id: 4, tit2: '私人定制' },
        { tit: '自由行', id: 5, tit2: '自由安排' },
      ],
      formValidate: {
        id: 0,
        brand_id: [],
        price: 0.1,
        code: '',
        store_name: '',
        cate_id: [],
        store_label_id: [],
        unit_name: '',
        video_link: '',
        video_open: false,
        is_show: 0,
        auto_on_time: '',
        auto_off_time: '',
        off_show: 0,
        supplier_id: 0,
      },
      props: { emitPath: false, multiple: true, checkStrictly: true },
      //产品分类树形数据
      treeSelect: [],
      // 品牌数据
      brandData: [],
      // 单位数据
      unitNameList: [],
      storeLabelShow: false,
      formBrand: {},
      ruleValidate: {
        store_name: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && this.formValidate.store_name === '') {
                callback(new Error('请输入产品名称'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],
        price: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && this.formValidate.price === '') {
                callback(new Error('请输入产品展示价格'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],
        
        cate_id: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab != '1' || (Array.isArray(this.formValidate.cate_id) && this.formValidate.cate_id.length)) {
                callback();
              } else {
                callback(new Error('请选择产品分类'));
              }
            },
            required: true,
            type: 'array',
          },
        ],
        unit_name: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && !this.formValidate.unit_name) {
                callback(new Error('请输入单位'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'change',
          },
        ],
        slider_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && !this.baseInfo.slider_image.length) {
                callback(new Error('请上传产品轮播图'));
              } else {
                callback();
              }
            },
            type: 'array',
          },
        ],
      },
      goodsSource: 1,
      supplierList: [],
    };
  },
  components: {
    storeLabelList,
    menusFrom,
    draggable: vuedraggable,
  },
  computed: {
    startPickOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formValidate.auto_off_time) {
            return (
              time.getTime() >
              new Date(that.formValidate.auto_off_time).getTime()
            );
          }
          return '';
        },
      };
    },
    endPickOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formValidate.is_show == '1') {
            return time.getTime() < Date.now();
          }
          if (that.formValidate.auto_on_time) {
            return (
              time.getTime() <
              new Date(that.formValidate.auto_on_time).getTime()
            );
          }
          return '';
        },
      };
    },
  },
  watch: {
    successData: {
      handler(val) {
        if (val) {
          let keys = Object.keys(this.formValidate);
          keys.map((i) => {
            this.formValidate[i] = this.baseInfo[i];
          });
        }
      },
      immediate: true,
      deep: true,
    },
    'baseInfo.slider_image': {
      handler(val) {
      },
      deep: true,
    },
    'baseInfo.video_link'(val) {
      this.formValidate.video_link = val;
    },
    'baseInfo.supplier_id'(val) {
      if (val) {
        this.goodsSource = 2;
      }
    },
    'formValidate.cate_id'() {
      this.$parent.validateField('cate_id');
    }
  },
  created() {
    this.goodsCategory();
    this.getBrandList();
    this.getAllUnit();
    this.getSupplierList();
  },
  methods: {
    // 品牌列表
    getBrandList() {
      brandList()
        .then((res) => {
          //initBran()函数作用iview中规定value必须是字符串，后台返回成了数字，用于处理这个，给了个递归；
          this.initBran(res.data);
          this.brandData = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    initBran(data) {
      data.map((item) => {
        item.value = item.value.toString();
        if (item.children && item.children.length) {
          this.initBran(item.children);
        }
      });
    },
    addBrand() {
      this.$refs.menusFrom.modals = true;
      this.$refs.menusFrom.titleFrom = '添加品牌分类';
      this.formBrand = {
        sort: 0,
        is_show: 1,
      };
      this.formBrand.fid = [0];
      this.$refs.menusFrom.type = 1;
    },
    // 产品分类；
    goodsCategory() {
      cascaderListApi(1)
        .then((res) => {
          this.treeSelect = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    addClass() {
      this.$modalForm(productCreateApi()).then(() => this.goodsCategory());
    },
    getAllUnit() {
      productAllUnit()
        .then((res) => {
          this.unitNameList = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    addUnit() {
      this.$modalForm(productUnitCreate()).then(() => this.getAllUnit());
    },
    addStoreLabel() {
      this.$modalForm(productLabelAdd()).then(() => {});
    },
    activeStoreData(storeDataLabel) {
      this.storeLabelShow = false;
      this.formValidate.store_label_id = storeDataLabel;
    },
    openStoreLabel(row) {
      this.storeLabelShow = true;
      this.$refs.storeLabel.storeLabel(
        JSON.parse(JSON.stringify(this.formValidate.store_label_id))
      );
    },
    // 标签弹窗关闭
    storeLabelClose() {
      this.storeLabelShow = false;
    },
    goodsOn(e) {
      if (e == 0 || e == 1) {
        this.formValidate.auto_on_time = '';
      }
    },
    goodsOff(e) {
      if (!e) {
        this.formValidate.auto_off_time = '';
      }
    },
    //定时上架
    onchangeShow(e) {
      this.formValidate.auto_on_time = e;
    },
    //定时下架
    onchangeOff(e) {
      this.formValidate.auto_off_time = e;
    },
    // 删除视频；
    delVideo() {
      this.$set(this.formValidate, 'video_link', '');
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.baseInfo.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.baseInfo.slider_image = newItems;
    },
    handleRemove(i) {
      this.baseInfo.slider_image.splice(i, 1);
    },
    modalPicTap(e) {
      this.$emit('modalPicTap', 'duo');
    },
    addVideo() {
      this.$emit('modalPicTap', 'dan', 'video');
    },
    unitChange(val) {
      EventBus.$emit('unitChanged', val);
    },
    //获取供应商列表；
    getSupplierList() {
      getSupplierList()
      .then(async (res) => {
        this.supplierList = res.data;
      })
      .catch((res) => {
        this.$Message.error(res.msg);
      });
    },
    sourceChange(value) {
	  this.formValidate.supplier_id = 0;
      this.$emit('sourceChange', value);
    },
    virtualbtn(id) {
      if (this.baseInfo.id) {
        return this.$Message.warning('旅游类型不能切换!');
      }
      if(id == 6){
        this.baseInfo.day_time = 1;
      } else {
        this.baseInfo.day_time = '';
      }
      this.baseInfo.tour_type = id;
    },
  },
};
</script>
<style scoped lang="scss">
.addClass {
  color: #1890ff;
  margin-left: 14px;
  cursor: pointer;
}
.input-display {
  display: none;
}
.labelInput {
  border: 1px solid #dcdee2;
  width: 50%;
  padding: 0 5px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  .span {
    color: #c5c8ce;
  }
  .iconxiayi {
    font-size: 12px;
  }
}
.labelClass {
  ::v-deep.ivu-form-item-content {
    line-height: unset;
  }
}
.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
  cursor: pointer;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.video-style {
  width: 100%;
  height: 100% !important;
  border-radius: 10px;
}
.tips {
  display: inline-bolck;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-top: 6px;
}
.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}


.virtual_boder {
  border: 1px solid #4073FA;
}
.virtual_boder2 {
  border: 1px solid #e7e7e7;
}
.virtual_san {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 26px solid #4073FA;
  border-left: 26px solid transparent;
}
.virtual_dui {
  position: absolute;
  bottom: -2px;
  right: 2px;
  color: #ffffff;
  font-family: system-ui;
}
.virtual {
  width: 120px;
  height: 60px;
  background: #ffffff;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;
  .virtual_top {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .virtual_bottom {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
}
.virtual:nth-child(2n) {
  margin: 0 12px;
}
.desc{
  color: #999999;
  font-size: 12px;
}
</style>
